<template>
  <div id="assetManage">
    <SearchForm v-model="ruleForm" :dataJ="dataJ" @search-form="searchForm" />
    <BkBtn :btnConfig="btnConfig" />
    <div class="card-box" :class="{ noData: !tableData.length }">
      <el-row :gutter="20">
        <el-checkbox-group v-model="checkList">
          <el-col :span="6" v-for="(item, ind) in tableData" :key="ind">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <el-checkbox :label="item.carNumber">&nbsp;</el-checkbox>
                <span class="carPlate">{{ item.carNumber }}</span>
                <el-tag effect="dark" type="danger" v-if="item.locked == 1">{{
                  item.lockedName
                }}</el-tag
                >&nbsp;
                <el-tag effect="dark">{{ item.carStatusName }}</el-tag>
              </div>
              <div class="item">
                <img
                  class="img"
                  :src="`${item.files.doMain}${item.files.fileUrl}`"
                  alt=""
                />
                <div class="info">
                  <div>品牌：{{ item.carBrand }}</div>
                  <div>型号：{{ item.carModel }}</div>
                  <div>年限：{{ item.carYear }}</div>
                  <div>里程：{{ item.carMileage }}</div>
                  <div>价格：{{ item.carPrice }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-checkbox-group>
      </el-row>
    </div>
    <div class="page-box">
      <BkPage :total="total" :page="page" />
    </div>
    <el-dialog
      title="租车人"
      :visible.sync="dialogFormVisible"
      width="500px"
      class="hireInfo"
      :before-close="dialogFormClose"
    >
      <el-form
        ref="manForm"
        :model="manForm"
        :rules="manRules"
        label-width="80px"
      >
        <el-form-item label="姓名" prop="hireName">
          <el-input
            v-model="manForm.hireName"
            show-word-limit
            maxlength="6"
            placeholder="请输入租车人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="hireIdCard">
          <el-input
            v-model="manForm.hireIdCard"
            show-word-limit
            maxlength="18"
            placeholder="请输入租车人证件号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="hirePhoneNum">
          <el-input
            v-model="manForm.hirePhoneNum"
            show-word-limit
            maxlength="11"
            placeholder="请输入租车人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="租期" prop="hireDateTime">
          <el-date-picker
            v-model="manForm.hireDateTime"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="hireDateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="总价" prop="totalPrice">
          <el-input disabled v-model="manForm.totalPrice"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormClose">取 消</el-button>
        <el-button type="primary" @click="sureHire">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getReadlyCar, hirePackCar } from "@/api/car";
import { validateIdNo, validatePhone } from "@/utils/validate";
import { timeDiff } from "@/utils/tools";

export default {
  name: "",
  data() {
    return {
      ruleForm: {},
      dialogVisible: false,
      dialogTitle: "",
      tableData: [],
      page: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      checkList: [],
      dialogFormVisible: false,
      manForm: {
        hireName: "",
        hireIdCard: "",
        hirePhoneNum: "",
        hireDateTime: [],
        totalPrice: "",
      },
      manRules: {
        hireName: [
          { required: true, message: "请输入租车人姓名", trigger: "blur" },
        ],
        hireIdCard: [
          { required: true, validator: validateIdNo, trigger: "blur" },
        ],
        hirePhoneNum: [
          { required: true, validator: validatePhone, trigger: "blur" },
        ],
        hireDateTime: [
          { required: true, message: "请选择租车期限", trigger: "blur" },
        ],
        totalPrice: [
          { required: true, message: "费用不能为空", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    dataJ() {
      return [
        {
          label: "车牌号",
          prop: "carNumber",
          type: "input",
        },
      ];
    },
    btnConfig() {
      return [
        {
          label: "出租",
          Fn: this.hireCar,
          icon: "el-icon-coin",
        },
      ];
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    searchForm() {
      this.page.pageNum = 1;
      this.getList();
    },
    async getList() {
      let data = {
        ...this.page,
        ...this.ruleForm,
      };
      let res = await getReadlyCar(data);
      this.checkList = [];
      this.tableData = res.records;
      this.total = res.total;
    },
    dialogFormClose() {
      this.dialogFormVisible = false;
      this.$refs.manForm.resetFields();
    },
    async hireCar() {
      if (!this.checkList.length) {
        this.$message({
          type: "warning",
          message: "未选择车辆",
        });
        return;
      }
      this.dialogFormVisible = true;
    },
    hireDateChange(dateRange) {
      let diff = timeDiff(dateRange[0], dateRange[1])
      console.log(dateRange, diff, 8888888)
      let filterList = this.tableData.filter(e => this.checkList.includes(e.carNumber))
      let sum = filterList.reduce((pre, cur) => {
        return pre + (cur.carPrice * diff)
      }, 0)
      console.log(sum)
      this.manForm.totalPrice = sum
    },
    async sureHire() {
      this.$refs["manForm"].validate(async (valid) => {
        if (valid) {
          let data = {
            carList: this.checkList,
            ...this.manForm,
            hireStartDateTime: this.manForm.hireDateTime[0],
            hireEndDateTime: this.manForm.hireDateTime[1],
          };
          await hirePackCar(data);
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.dialogFormVisible = false;
          this.getList();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
#assetManage {
  padding: 0 20px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .card-box {
    flex: auto;
    overflow: auto;
    height: 0;
    overflow-x: hidden;
    padding-right: 12px;
    .el-col {
      margin-bottom: 20px;
      .item {
        .img {
          width: 200px;
          height: 200px;
        }
      }
      .carPlate {
        margin-right: 10px;
      }
    }
  }
  .page-box {
    padding: 10px;
    text-align: right;
  }
  .demo-ruleForm {
    .el-col {
      padding-right: 10px;
      &:last-child {
        padding: 0;
      }
      .dian {
        text-align: center;
        .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #000;
          border-radius: 20px;
        }
      }
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
  .card-box {
    .item {
      display: flex;
      .info {
        flex: 1;
        margin-left: 10px;
        line-height: 30px;
      }
    }
  }
  ::v-deep .hireInfo {
    .el-date-editor--datetimerange {
      width: 100%;
    }
  }
}
</style>
